<template>
  <div class="oeder_detail">
    <van-sticky>
      <van-nav-bar title="订单详情" left-arrow @click-left="back" />
    </van-sticky>
	<div class="content">
    <div class="flex goods">
      <div class="pic" :style="{backgroundImage:`url(${detail.orderType == 'GOOD' ? detail.goodImg : detail.packageImg})`}"></div>
      <div class="infor">
        <h6 class="name">{{detail.orderType == 'GOOD' ?  detail.goodsName : detail.packageName}}</h6>
        <p class="type">服务项目{{detail.serviceName}}</p>
        <p class="type">创建时间：{{detail.orderTime}}</p>
	
        <p class="price">¥{{detail.realPrice}}</p>
      </div>
    </div>

    <div class="address flex">
      <van-icon name="location" color="#2a80ff" size="0.5rem" />
      <div class="infor">
        <p class="name">
          <span>{{detail.realName}}</span>
          <span>{{detail.cellPhone}}</span>
          <!-- <span>{{detail.email}}</span> -->
        </p>
        <div class="place flex">
          <p>{{detail.address}}</p>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <div class="tips">
      <h4 class="title">订单信息</h4>
      <p class="text">订单编号：{{detail.orderNo}}</p>
      <p class="text">下单时间：{{detail.orderTime}}</p>
      <p class="text">订单状态：{{detail.orderStatusName}}</p>
    </div>

    <div class="tips">
      <h4 class="title">订单追踪</h4>
      <p class="text">在您订单付款之后，我们的工作人员会在工作日的2个小时内联系您，请您保持电话畅通</p>
      <p class="text">订单付款之后，即可申请开发票，发票我们将以邮寄/发送邮箱的方式给您</p>
    </div>
	<div class="tips">
	  <h4 class="title">服务流程</h4>
	<van-steps direction="vertical" v-if="detail.progressList" :active="detail.progressList.length-1">
	  <van-step v-for="(item,index) in detail.progressList">
	    <h3>{{item.description}}</h3>
	    <p>{{item.insertTime}}</p>
	  </van-step>

	</van-steps>
	</div>
	</div>
    <div class="footer_bar">
      <span class="btn_white" v-if="detail.orderStatus == 0" @click="setCancle(detail)">取消订单</span>
      <router-link tag="span" :to="{path:`/pay/${detail.orderNo}`}" class="btn_blue" v-if="detail.orderStatus == 0">立即付款</router-link>
      <router-link tag="span" :to="{path:`/invoice/select/${detail.id}`}" class="btn_white" v-if="detail.orderStatus == 1 && detail.invoiceStatus == 0">开发票</router-link>
      <router-link tag="span" :to="{path:`/order/detail/evaluate/${detail.id}`}" class="btn_blue" v-if="detail.evaStatus == 0 && detail.orderStatus == 2">评价</router-link>
    </div>

    <van-popup v-model="showCancle" position="bottom">
      <div class="order_cancle">
        <h4 class="title">取消订单</h4>
        <p class="tip">请填写选择取消订单原因</p>
        <ul>
          <van-radio-group v-model="cancleFrom.description">
            <li class="row-between-center van-ellipsis">
              <span>我不需要了</span>
              <van-radio name="我不需要了"></van-radio>
            </li>
            <li class="row-between-center van-ellipsis">
              <span>信息填写错误，重新下单</span>
              <van-radio name="信息填写错误，重新下单"></van-radio>
            </li>
            <li class="row-between-center van-ellipsis">
              <span>其他原因</span>
              <van-radio name="其他原因"></van-radio>
            </li>
          </van-radio-group>
          <div class="btn" @click="doCancle">确定取消</div>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import api from 'api/api'
export default {
  data () {
    return {
      detail: {},
      showCancle: false,
      cancleFrom: {
        id: '',
        description: ''
      },
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      api.orderDetail({
        data: {
          id: '',
          orderNo: this.$route.params.id,
        }
      }).then(res => {
        this.detail = res.data
		console.log('deee',this.detail)
      })
    },
    setCancle (detail) {
      this.cancleFrom.id = detail.id
      this.showCancle = true
    },
    doCancle () {
      if (!this.cancleFrom.description) {
        this.$toast('请选择取消原因')
        return
      }
      api.ordercancel({
        data: this.cancleFrom
      }).then(res => {
        this.showCancle = false
        this.getData()
      })
    },
    back () {
      window.history.go(-1)
    }
  }
}
</script>

<style lang="scss">

.oeder_detail {
  min-height: 100vh;
  font-size: 0.28rem;
  text-align: left;
  background-color: #f5f5f5;
 
  .content{
	   overflow: scroll;
	   height: 80vh;
  }
  .goods {
    background-color: #fff;
    padding: 0.31rem;
    margin-bottom: 0.18rem;
    .pic {
      width: 1.85rem;
      height: 1.85rem;
      flex: none;
	  background-size: 100% 100%;
    }
    .infor {
      flex: auto;
      margin-left: 0.31rem;
      .name {
        font-size: 0.37rem;
        margin-bottom: 0.2rem;
      }
      .type {
        font-size: 0.22rem;
        margin-bottom: 0.15rem;
        line-height: 1;
      }
      .price {
        font-size: 0.36rem;
        color: #ff344c;
        line-height: 1;
      }
    }
  }

  .address {
    padding: 0.32rem;
    background-color: #fff;
    align-items: center;
    background-image: url("../../assets/img/home/sjbj.png");
    background-repeat: no-repeat;
    background-size: 100% 0.05rem;
    background-position: top left;
    font-size: 0.24rem;
    .infor {
      margin-left: 0.2rem;
      .name {
        margin-bottom: 0.25rem;
      }
      .place {
        .van-icon {
          margin-top: 0.05rem;
        }
      }
    }
  }
  .no_address {
    padding: 0.32rem;
    background-color: #fff;
    align-items: center;
    background-image: url("../../assets/img/home/sjbj.png");
    background-repeat: no-repeat;
    background-size: 100% 0.05rem;
    background-position: top left;
    font-size: 0.24rem;
    .icon_add {
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      text-align: center;
      background-color: #3382ef;
      color: #fff;
      padding: 0 0.06rem;
      border-radius: 0.04rem;
      margin-right: 0.1rem;
    }
  }
  .tips {
    margin-top: 0.18rem;
    background-color: #fff;
    padding: 0.31rem;
    .title {
      font-size: 0.32rem;
    }
    .text {
      position: relative;
      padding-left: 0.25rem;
      margin-top: 0.2rem;
      font-size: 0.22rem;
      color: #999;
    }
  }
  .footer_bar {
    position: fixed;
    display: flex;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    line-height: 0.98rem;
    background-color: #fff;
    padding: 0.3rem 0.3rem 0.37rem 0.3rem;
    display: flex;
    justify-content: flex-end;
    span {
      margin-left: 0.2rem;
    }
    .btn_white {
      width: 1.27rem;
      line-height: 0.4rem;
      text-align: center;
      border: 1px solid rgba(153, 153, 153, 1);
      border-radius: 0.2rem;
      font-size: 0.22rem;
      color: #999;
    }
    .btn_blue {
      width: 1.27rem;

      line-height: 0.4rem;
      text-align: center;
      border: 1px solid 348aff;
      border-radius: 0.2rem;
      background-color: #348aff;
      font-size: 0.22rem;
      color: #fff;
    }
  }
  .order_cancle {
    padding: 0.3rem;
    .title {
      font-size: 0.3rem;
    }
    .tip {
      font-size: 0.22rem;
      color: #999;
      text-align: left;
      margin: 0.47rem 0 0.2rem 0;
    }
    li {
      line-height: 0.93rem;
      font-size: 0.26rem;
    }
    .btn {
      width: 6.9rem;
      line-height: 0.76rem;
      background: linear-gradient(
        96deg,
        rgba(72, 143, 240, 1),
        rgba(51, 130, 239, 1)
      );
      text-align: center;
      border-radius: 0.38rem;
      font-size: 0.36rem;
      color: #fff;
      margin: 0.38rem 0;
    }
  }
}
</style>